<template>
	<view v-if="physicalShow">
		<view class="com-physical" :class="physicalShow ? 'on' : ''">
			<text class="iconfont icon-guanbi" @click="close"></text>
			<view class="physical-title">疾病史/妊娠哺育</view>
			<scroll-view scroll-y="true" style="height: 400px;">
				<view class="scroll-content">
					<view class="list-item" v-for="(item,index) in diseaseList" :key="index">
						<view class="section-box">
							<view class="section-title">{{item.name}}</view>
							<view class="section-option">
								<radio-group name="" @change="(e) => mainRadioChange(e,item,index)">
									<view class="radio-box">
										<view class="radio-item" v-for="(subItem,subIndex) in item.select"
											:key="subIndex">
											<radio :value="radioVal(subItem)"
												:checked="subItem.type == 1 ? subItem.selected : !subItem.selected">
												{{subItem.name}}
											</radio>
										</view>
									</view>
								</radio-group>
							</view>
						</view>
						<view class="option-box" v-if="formData[index].select == 1 && item.type > 1">
							<view class="option-item" v-for="(subItem,subIndex) in item.symptom" :key="subIndex">
								<view class="item-tag" :class="subItem.selected?'item-tag-sel':''"
									@click="clickSymptom(item,subItem)">{{subItem.name}}</view>
							</view>
							<view class="input-box" v-if="item.type == 3">
								<input :placeholder="item.place" v-model="formData[index].place" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="submit-box" @click="clickSubmit">
				<view class="submit">確認</view>
			</view>
			<view class="hk-safe20"></view>
		</view>
		<view class="mask" v-show="physicalShow"></view>
	</view>
</template>

<script>
	import {
		getInquiryDisease
	} from '@/api/user';
	export default {
		name: 'physical',
		props: {
			physicalShow: {
				type: Boolean,
				default: false
			},
			//编辑-数据
			hisData:{
				type: Array,
				default: function(){
					return [];
				}
			},
		},
		watch:{
			hisData:{
				immediate:true,
				handler(n,o){
					if(n && n.length>0){
						this.isEdit = true;
						this.dataDeal();
					}
				}
			}
		},
		data() {
			return {
				isEdit:false,
				diseaseList: [],
				formData: [],
			};
		},
		mounted() {
			this.getInquiryDisease();
		},
		methods: {
			radioVal(subItem) {
				return subItem.type + '';
			},
			// 数据处理
			dataDeal() {
				this.diseaseList.forEach(item => {
					item.select.forEach(subItem => {
						subItem.selected = false;
						//编辑【处理选中的病史】
						if(this.isEdit){
							this.hisData.forEach(hisItem=>{
								//判断最外层病症id
								if(hisItem.id == item.id){
									subItem.selected = hisItem.select == 1 ? true:false;
								}
							})
						}
					});
					// 其他病史 加'其他'选项
					if (item.type == 4) {
						
						if(this.isEdit){
							let userInputSym = [];	//用户输入的
							let systomSym = [];	// 系统编写的
							item.symptom.forEach(sys=>{
								systomSym.push(sys.name);
							})
							// 处理自行编写的病史【检索出自编病史并加入系统病史数组】
							this.hisData.forEach(hisItem=>{
								if(hisItem.type == 4){
									// 用户已经选择的病史【有系统的也有可能有自行输入的】[这个是字符串数组]
									let userSel =  hisItem.symptom;
									userSel.forEach(userItem=>{
										let idx = systomSym.indexOf(userItem);
										if(idx==-1){
											// 说明是自己输入的病史[这里只记录，下面有判断选中]
											let selfInput = {
												id:999,
												name:userItem,
											}
											userInputSym.push(selfInput);
										}
									});								
								}
							})
							if(userInputSym.length>0){
								item.symptom.unshift(...userInputSym);
							}
						}
						
						item.symptom.push({
							id: 0,
							name: '+ 其他'
						})
					}
					
					// 判断选中
					item.symptom.forEach(symItem => {
						symItem.selected = false;
						
						//编辑【病症有自行输入的`其他`而有没有id标识只能判断name】
						if(this.isEdit){
							this.hisData.forEach(hisItem=>{
								hisItem.symptom.forEach(hisSym=>{
									if(hisSym == symItem.name){
										symItem.selected = true;
									}
								});
							});
						}
					});
				});
				// formData处理
				if(this.isEdit) {
					this.formData = JSON.parse(JSON.stringify(this.hisData));
				}else {
					this.formData = JSON.parse(JSON.stringify(this.diseaseList));
					this.formData.forEach(item => {
						item.select = 0;
						item.symptom = [];
						item.place = '';
					});
				}
			},
			getInquiryDisease() {
				getInquiryDisease().then(res => {
					this.diseaseList = res.data;
					this.dataDeal();
				}).catch(err => {
					this.$util.Tips({
						title: err
					})
				});
			},
			mainRadioChange(e, item, index) {
				this.formData.forEach(forItem => {
					if (forItem.id == item.id) {
						forItem.select = e.target.value;
					}
				});
			},
			clickSymptom(item, subItem) {
				// console.log("rk===>[病症]", item.name, item.type, subItem.name, subItem.id);
				if (subItem.id != 0) {
					subItem.selected = !subItem.selected;
					this.$forceUpdate();
					this.updateFormSym(item);
				} else {
					//手动输入其他
					this.$emit('otherEvent', item.id);
				}
			},
			updateFormSym(item){
				this.formData.forEach(forItem => {
					if (forItem.id == item.id) {
						forItem.symptom = [];
						item.symptom.forEach(symItem => {
							if (symItem.selected) {
								forItem.symptom.push(symItem.name);
							}
						})
						// console.log("rk===>[选中的子病症]" + JSON.stringify(forItem));
					}
				})
			},
			// 其他病史 自行填写 [falg  otherEvent 事件的参数]
			inputFinish(flag, text) {
				// console.log("rk===>[输入标识]", flag, text);
				this.diseaseList.forEach(item => {
					if (item.id == flag) {
						let newItem = {
							id: 999,
							name: text,
							selected: true,
						};
						item.symptom.unshift(newItem);
						this.updateFormSym(item);
					}
				})
			},
			close() {
				this.$emit('close')
			},
			clickSubmit() {
				// console.log("rk===>[确认]" + JSON.stringify(this.formData));
				let pass = true;
				let alertStr = '';
				for (var i = 0; i < this.formData.length; i++) {
					let item = this.formData[i];
					if (item.type > 1 && item.select == 1) {
						if (item.symptom.length <= 0 && !item.place) {
							pass = false;
							alertStr = item.type == 3 ? '請填寫過敏史' : '請勾選' + item.name;
							break;
						}
					}
				}
				if (!pass) {
					return this.$util.Tips({title:alertStr});
				}
				
				let jsonStr = JSON.stringify(this.formData);
			   /*
				let new_list = {};
				this.formData.forEach(item=>{
					new_list[item.id] = item
				});
				let new_json = JSON.stringify(new_list);
				*/
				
				let showStr = this.$util.symptomsToStr(this.formData);
				// console.log("rk===>[輸出一句話]" ,showStr);
				this.$emit('diseaseSubmit', jsonStr,showStr);
				this.$emit('close')
			},
		}
	};
</script>

<style lang="scss">
	.com-physical {
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 77;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);

		&.on {
			transform: translate3d(0, 0, 0);
		}

		.icon-guanbi {
			position: absolute;
			font-size: 30rpx;
			top: 30rpx;
			right: 30rpx;
			color: #ccc;
		}

		.physical-title {
			padding: 30rpx 0;
			text-align: center;
			border-bottom: 1rpx solid #ddd;
		}

		.scroll-content {
			padding: 30rpx 0;

			.list-item {
				.section-box {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;

					.section-title {
						margin-right: 10rpx;
					}

					.section-option {
						display: flex;
						align-items: center;

						.radio-box {
							display: flex;

							.radio-item {
								margin-right: 30rpx;

								&:nth-last-child(1) {
									margin-right: 0rpx;
								}
							}
						}
					}
				}

				.option-box {
					padding: 0rpx 10rpx;
					display: flex;
					flex-wrap: wrap;

					.option-item {
						margin: 0 30rpx 20rpx 0;

						.item-tag {
							padding: 10rpx 16rpx;
							border: 1rpx solid #ccc;
							border-radius: 10rpx;
							font-size: 12px;
							line-height: 16px;
						}

						.item-tag-sel {
							border: 1rpx solid var(--view-theme);
							background-color: var(--view-minorColor);
						}
					}

					.input-box {
						width: 100%;
						padding: 10rpx 0;
						input{
							font-size: 14px;
						}
					}
				}
			}
		}

		.submit-box {
			display: flex;
			justify-content: center;

			.submit {
				background-color: var(--view-theme);
				display: flex;
				justify-content: center;
				width: 90%;
				padding: 20rpx 0;
				color: #fff;
				border-radius: 100px;
			}
		}


	}

	.trembling {
		animation: shake 0.6s;
	}

	.main-color {
		color: var(--view-theme);
	}

	/deep/ radio .wx-radio-input.wx-radio-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
	}

	/deep/ radio .uni-radio-input.uni-radio-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
	}

	/deep/ uni-radio .uni-radio-input.uni-radio-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
	}

	/deep/ uni-switch .uni-switch-input.uni-switch-input-checked {
		border: 1px solid var(--view-theme) !important;
		background-color: var(--view-theme) !important;
	}
</style>